<template>
	<view>
		<block v-if="person && vote">
			<block v-if="vote.mold == '1'">
				<view class="head-bg" :style="'background-image: url('+require('@/static/img/person.png')+')'">
					<u-gap :height="statusBarHeight+10" bgColor="transparent"></u-gap>
					<u-text text="选手详情" color="#fff" size="14" align="center"></u-text>
					<view style="padding-top: 30px;">
						<u-avatar :src="imgUrl + person.image" size="60" v-if="person.image"></u-avatar>
						<u-text :text="person.name" size="18" align="center" color="#fff" lineHeight="40"></u-text>
						<u-text :text="'正在参加' + vote.name" size="12" align="center" color="#fff"></u-text>
					</view>

					<u-row customStyle="margin-top:20px;">
						<u-col span="3.3">
							<u-text :bold="true" :text="person.code" align="center" size="16" color="#fff"
								lineHeight="30">
							</u-text>
							<u-text text="编号" align="center" size="12" color="#fff"></u-text>
						</u-col>
						<u-col span="1">
							<u-text text="|" align="center" size="18" color="#fff"></u-text>
						</u-col>
						<u-col span="3.3">
							<u-text :bold="true" :text="person.count || 0" align="center" size="16" color="#fff"
								lineHeight="30">
							</u-text>
							<u-text text="票数" align="center" size="12" color="#fff"></u-text>
						</u-col>
						<u-col span="1">
							<u-text text="|" align="center" size="18" color="#fff"></u-text>
						</u-col>
						<u-col span="3.3">
							<u-text :bold="true" :text="person.paiming" align="center" size="18" color="#fff"
								lineHeight="30">
							</u-text>
							<u-text text="排名" align="center" size="12" color="#fff"></u-text>
						</u-col>
					</u-row>
				</view>

				<view class="content_box">
					<swiper v-if="person.images.length > 0" :style="'height:' + heights[current]" @change="imgChange"
						indicator-dots="true" indicator-color="rgba(225, 225, 225, .49)" indicator-active-color="#fff">
						<swiper-item class="" v-for="(item, index) in person.images" :key="index">
							<image :src="imgUrl + item" style="width: 100%;height: 100%;border-radius: 15px;"
								@load="imgLoad" :data-index="index" />
						</swiper-item>
					</swiper>

					<!-- #ifdef MP-WEIXIN -->
					<ad :unit-id="ad.vote_person" v-if="ad.vote_person" ad-intervals="30" style="margin-top: 10px;">
					</ad>
					<!-- #endif -->


					<block v-if="person.desc">
						<u-text text="已折叠选手介绍" color="#2b85e4" align="center" size="16" lineHeight="50"
							prefixIcon="arrow-down-fill" iconStyle="{'color':'#2b85e4'}" @click="fold=true"
							v-if="!fold"></u-text>
						<u-text text="选手介绍" align="center" size="16" lineHeight="50" v-if="fold"></u-text>
						<view class="intro" style="white-space:pre-wrap" v-if="fold">
							<rich-text :nodes="utils.formatRichText(person.desc)"></rich-text>
						</view>
					</block>

<!-- 					<order :order="orders"
						v-if="orders && orders.length > 0 && gift_status == true && active.gift_person == 1">
					</order> -->
					<button @click="giveGift()" style="width: 400rpx; border-radius: 10rpx; background-color: #31CDCA; color: #fff; margin-top: 30rpx;">充值礼物</button>
				</view>
			</block>
			<block v-if="vote.mold == '2'">
				<video id="video" class="videoshow" :src="imgUrl + person.video" :controls="false" :autoplay="true"
					:loop="true">
					<u-navbar :title="person.code+'号 '+person.name" bgColor="transparent"
						titleStyle="height:30px;line-height:30px;color:#fff;font-weight: bold;font-size: 18px;">
					</u-navbar>
				</video>
				<view class="person-video">
					<view>
						<view class="person-video-piao">
							<text class="number">{{person.count}}</text>
							<text>当前票数</text>
						</view>
						<view class="person-video-piao">
							<text class="number">{{person.paiming}}</text>
							<text>当前排名</text>
						</view>
					</view>
					<view class="person-video-desc" @click="desc_show = true">
						选手详情<u-icon name="arrow-right" top="5"></u-icon>
					</view>
				</view>
				<u-popup :show="desc_show" @close="close" mode="bottom" round="15" :closeable="true">
					<view class="popup">
						<rich-text :nodes="utils.formatRichText(person.desc)"></rich-text>
					</view>
				</u-popup>
			</block>
			<view style="height: 65px;"></view>
			<view class="tabbar">
				<u-row>
					<u-col span="2" textAlign="center" @click="back">
						<text class="active active-fanhui"
							:style="'border: 1px solid '+color_value+';margin:0 auto;color:'+color_value"></text>
					</u-col>
					<u-col span="8" textAlign="center" @click="join">
						<view class="join" :style="'background-color: '+color_value">
							{{vote.btn_txt || '投票'}}
							<!-- #ifdef H5 -->
							<wx-open-subscribe v-if="subscription && subscription.wechat_toupiaojieguo"
								:template="subscription.wechat_toupiaojieguo" id="subscribe-btn" ref="subscribeBtn"
								style="width: 100%; z-index: 2; height: 100%;position:absolute;top:0;left:0;">
								<script type="text/wxtag-template">
									<style>
										.btn2 {
											width:100%;
											height:45px;
											border: none;
											opacity: 0;
										}
									</style>
									<button class="btn2"></button>
								</script>
							</wx-open-subscribe>
							<!-- #endif -->
						</view>
					</u-col>
					<u-col span="2" textAlign="center">
						<!-- #ifdef MP-WEIXIN -->
						<text class="active active-fenxiang"
							:style="'border: 1px solid '+color_value+';margin:0 auto;color:'+color_value"
							@click="share"></text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<text class="active active-shouye1"
							:style="'border: 1px solid '+color_value+';margin:0 auto;color:'+color_value"
							@click="utils.goreto('/pages/vote/index?vote_id='+vote.id)"></text>
						<!-- #endif -->
<!-- 						<text class="active active-liwu float" style="bottom: 80px;"
							:style="'font-size:26px;border: 1px solid '+color_value+';color:'+color_value"
							v-if="gift_status" @click="giveGift()"></text> -->

<!-- 						<text class="active active-danmu1 float"
							:style="'border: 1px solid '+color_value+';color:'+color_value+';bottom:' + (gift_status ? '145px' : '80px')"
							v-if="active.review_status == 1" @click="reviewShow()"></text> -->
					</u-col>
				</u-row>
			</view>

			<u-popup :show="mobile_show" @close="close" mode="center" round="15">
				<view class="popup">
					<u-text text="针对国家出台的网络实名制相关要求，用户需要及时完善账户信息，并绑定手机号码。"></u-text>
					<button :class="color + '-bg'" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">点击绑定手机号</button>
				</view>
			</u-popup>

			<u-popup :show="mcaptcha_show" @close="close" mode="center" round="15">
				<view class="popup">
					<canvas class="canvas" canvas-id="canvas" id="canvas"></canvas>
					<input placeholder="请输入验证码进行投票" maxlength="4" v-model="input" type="number" class="input"
						:style="'border: 1px solid ' + color_value" />
					<button :class="color + '-bg'" @tap="verify">{{vote.btn_txt || '投票'}}</button>
				</view>
			</u-popup>

			<music :music="person.music" v-if="person"></music>

			<gift :gift_show="gift_show" :vote_id="vote.id" :person_id="person.id" v-on:close="close" v-if="person">
			</gift>

			<review :review_show="review_show" :vote_id="vote.id" :person_id="person.id" v-on:close="close"
				v-if="person && active.review_status == 1"></review>
		</block>

		<!-- #ifdef MP-WEIXIN -->
		<adcustom></adcustom>
		<!-- #endif -->

		<setuser v-model="show" @updated="updated"></setuser>

		<!-- 投票表单 -->
		<u-popup :round="10" :closeable="true" :closeOnClickOverlay="false" :show="join_form_show" mode="center" @close="close">
			<view class="join_form">
				<view class="join_form_title">请提交相关资料进行投票</view>
				<u-form :model="join_form_submit" labelWidth="75px">
					<u-form-item :label="item" required v-for="(item, index) in join_form" :key="index">
						<u-input v-model="join_form_submit[item]" :placeholder="'请输入'+item" border="bottom"></u-input>
					</u-form-item>
					<button type="primary" @click="join" class="submit">提交</button>
				</u-form>
			</view>
		</u-popup>
		<!-- 投票表单 -->
		
		<!-- #ifdef MP-WEIXIN -->
		<privacy ref="privacy"></privacy>
		<!-- #endif -->
		<u-loading-page :image="system.domain+'/assets/addons/kzvote/img/loading.gif'" bgColor="#36c3e5" color="#36c3e5"
			iconSize="200" :loading="loading" v-if="system"></u-loading-page>
	</view>
</template>

<script>
	import music from '@/components/music/music.vue';
	import order from '@/components/order/order.vue';
	import gift from '@/components/gift/gift.vue';
	import review from '@/components/review/review.vue';
	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				imgUrl: 'common/cdnurl',
				system: 'common/system',
				color: 'common/color',
				active: 'common/active',
				ad: 'common/ad',
				subscription: 'common/subscription',
			})
		},
		components: {
			order,
			music,
			gift,
			review
		},
		data() {
			return {
				user: uni.getStorageSync('user'),
				color_value: '',
				statusBarHeight: 0,
				orders: [],
				person_id: 0,
				vote: [],
				person: [],
				heights: [],
				current: 0,
				mobile_show: false,
				mcaptcha_show: false,
				ctx: '',
				verifycode: '',
				input: '',
				gift_status: false,
				gift_show: false,
				review_show: false,
				desc_show: false,
				loading: true,
				fold: false, //是否折叠选手
				show: false,
				join_form: [],	//投票表单
				join_form_show: false,
				join_form_submit:{},
				
				is_join_form:0,	//是否已经填写过表单
			};
		},
		async onLoad(options) {
			await this.$onLaunched;
			// #ifdef MP-WEIXIN
			let isPrivacySetting = await this.$refs.privacy.getPrivacySetting("showPrivacy")
			if (isPrivacySetting) {
				this.utils.wxapp_login()
			}
			// #endif
			if (options.scene) {
				var scene = decodeURIComponent(options.scene);
				this.person_id = scene;
			} else {
				this.person_id = options.person_id;
			}
			var sys = uni.getSystemInfoSync();
			this.statusBarHeight = sys['statusBarHeight'];

			this.http('person/detail', {
				id: this.person_id
			}, 'get').then(res => {
				this.orders = res.data.order;
				this.person = res.data.person;
				this.is_join_form = res.data.is_join_form;
				this.vote = res.data.person.vote;
				if (this.vote.join_form){
					this.join_form = this.vote.join_form.split(',')
				}
				if (this.vote.shield_status == 1) {
					//屏蔽流量主
					this.$store.state.common.ad = null
				} else {
					// #ifdef MP-WEIXIN
					this.adUtils.cp.load('vote_person_cp')
					// #endif
				}
				this.loading = false
				if (this.active.gift_status == 1 && this.vote.gift_status == 1) {
					this.gift_status = true
					if (sys.platform == 'ios' && this.active.ios_gift_status == 0) {
						this.gift_status = false
					}
				}

				if (this.vote.temp_name == 'qqsh') {
					this.color_value = '#9c4e1d'
				} else if (this.vote.temp_name == 'huajia') {
					this.color_value = '#00BFFF'
				} else if (this.vote.temp_name == 'sheji') {
					this.color_value = '#fa3612'
				} else if (this.vote.temp_name == 'fengcai') {
					this.color_value = '#AB1600'
				} else if (this.vote.temp_name == 'jiewu') {
					this.color_value = '#F842BD'
				} else if (this.vote.temp_name == 'shufa') {
					this.color_value = '#000000'
				} else if (this.vote.temp_name == 'wang') {
					this.color_value = '#31CDCA'
				} else if (this.vote.temp_name == 'sheying') {
					this.color_value = '#262621'
				} else if (this.vote.temp_name == 'youxiu') {
					this.color_value = '#41d1fb'
				} else if (this.vote.temp_name == 'liuyi') {
					this.color_value = '#7ef903'
				}

				// #ifdef MP-WEIXIN
				uni.$u.mpShare = {
					title: this.person.name,
					path: '/pages/vote/person?person_id=' + this.person_id,
					imageUrl: this.imgUrl + this.person.image
				}
				// #endif
				this.utils.share({
					title: this.person.name,
					imgUrl: this.imgUrl + this.person.image
				})
			});
		},
		onReady() {
			// #ifdef H5
			this.$jweixin.ready(() => {
				this.$nextTick(() => {
					var btn = this.$refs.subscribeBtn;
					btn.addEventListener('success', ({
						detail
					}) => {
						console.log('success1', detail);
						this.join()
					});
					btn.addEventListener('error', ({
						detail
					}) => {
						console.log('fail1', detail);
					});
				})
			})
			// #endif
		},
		methods: {
			imgLoad(e) {
				uni.getSystemInfo({
					success: res => {
						this.heights[e.currentTarget.dataset.index] = (res.windowWidth * 0.8 * e.detail
							.height) / e.detail.width + 'px';
						this.$forceUpdate();
					}
				});
			},
			imgChange(e) {
				this.current = e.detail.current;
			},
			back() {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					this.utils.goreto('/pages/vote/index?vote_id=' + this.vote.id)
				}
			},
			updated(user) {
				this.user = user
				uni.setStorageSync("user", user)
			},
			share() {
				if (!this.user.nickname || this.user.nickname.indexOf("投票用户") != -1 || !this.user.avatar) {
					this.show = true
					return false;
				}
				this.utils.goto('/pages/share/share?type=person&id=' + this.vote.id + '&person_id=' + this.person.id +
					'&name=' + this.person.name + '&image=' + this.person.image)
			},
			//送礼物
			giveGift() {
				if (!this.user.nickname || this.user.nickname.indexOf("投票用户") != -1 || !this.user.avatar) {
					this.show = true
					return false;
				}
				this.gift_show = true;
			},

			//弹幕
			reviewShow() {
				if (!this.user.nickname || this.user.nickname.indexOf("投票用户") != -1 || !this.user.avatar) {
					this.show = true
					return false;
				}
				this.review_show = true;
			},
			close() {
				this.mobile_show = false;
				this.mcaptcha_show = false;
				this.gift_show = false;
				this.review_show = false;
				this.desc_show = false;
				this.join_form_show = false;
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.$u.toast('授权失败')
					return
				}
				uni.login({
					success: res => {
						var data = {
							data: e.detail.encryptedData,
							iikv: e.detail.iv,
							code: res.code
						};
						this.http('user/getPhone', data, 'post').then(res => {
							this.mobile_show = false;
							uni.setStorageSync('user', res.data.user);
							this.user = res.data.user
							uni.$u.toast('绑定成功')
						})
						// .catch({
						// 	this.mobile_show = false;
						// });
					}
				});
			},
			join() {
				if (!this.user.nickname || this.user.nickname.indexOf("投票用户") != -1 || !this.user.avatar) {
					this.show = true
					return false;
				}
				if (this.vote.end_time * 1000 < Number(new Date())) {
					uni.$u.toast('活动已结束')
					return;
				}
				//#ifdef MP-WEIXIN
				//验证是否需要授权手机号
				if (this.active.vote_mobile_status == 1) {
					if (this.user && !this.user.mobile) {
						this.mobile_show = true
						return;
					}
				}
				// #endif
				
				// 判断是否需要执行投票表单
				if (this.vote.join_form_status == 1 && this.is_join_form == 0){
					if (this.join_form_show && this.join_form && this.join_form_submit && this.join_form.length != this.join_form_submit.length){
						for(var i in this.join_form){
							if (!this.join_form_submit[this.join_form[i]]){
								uni.$u.toast('请填写'+this.join_form[i])
								return;
							}
						}
						this.join_form_show = false
					}else{
						this.join_form_show = true
						return;
					}
				}
				
				this.ctx = uni.createCanvasContext('canvas', this);
				if (this.vote.verify_status == 1) {
					this.refresh();
					this.mcaptcha_show = true;
					return;
				}
				this.submit()
			},
			verify() {
				if (this.verifycode == parseInt(this.input)) {
					this.mcaptcha_show = false;
					this.verifycode = '';
					this.input = '';
					this.submit();
				} else {
					uni.$u.toast('验证码错误，请重新输入')
					this.refresh();
				}
			},

			submit() {
				let send = false;
				// #ifdef MP-WEIXIN
				let tmplIds = ''
				if (this.subscription && this.subscription != null && this.subscription != 'null') {
					tmplIds = this.subscription.toupiaojieguo
				}
				uni.requestSubscribeMessage({
					tmplIds: [tmplIds],
					complete: res => {
						if (res[tmplIds] == 'accept'){
							send = true;
						}
						// #endif
						this.http('person/vote', {
							vote_id: this.vote.id,
							person_id: this.person.id,
							join_form: this.join_form_submit,
							send: send,
						}, 'post').then(res => {
							this.join_form_submit = {}
							this.utils.goto('/pages/result/result?person_id=' + this.person.id +
								'&code=' + res.code + '&msg=' + res.msg)
						});
						// #ifdef MP-WEIXIN
					}
				});
				// #endif
			},

			refresh() {
				var randomNum = Math.random();
				var code = parseInt(randomNum * 9000 + 1000) + '';
				this.verifycode = code;
				this.ctx.clearRect(0, 0, 120, 40);
				this.ctx.setTextBaseline('middle');
				this.ctx.setFillStyle(this.randomColor(180, 240));
				this.ctx.fillRect(0, 0, 120, 40);
				let arr = code.split('');
				if (arr.length === 0) {
					arr = ['e', 'r', 'r', 'o', 'r'];
				}
				let offsetLeft = (120 * 0.6) / (arr.length - 1);
				let marginLeft = 120 * 0.2;
				arr.forEach((item, index) => {
					this.ctx.setFillStyle(this.randomColor(0, 180));
					let size = this.randomNum(24, (40 * 3) / 4);
					this.ctx.setFontSize(size);
					let dis = offsetLeft * index + marginLeft - size * 0.3;
					let deg = this.randomNum(-30, 30);
					this.ctx.translate(dis, 20);
					this.ctx.rotate((deg * Math.PI) / 180);
					this.ctx.fillText(item, 0, 0);
					this.ctx.rotate((-deg * Math.PI) / 180);
					this.ctx.translate(-dis, -20);
				});
				this.input = '';
				setTimeout(() => {
					this.ctx.draw();
				}, 200);
			},
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			randomColor(min, max) {
				let r = this.randomNum(min, max);
				let g = this.randomNum(min, max);
				let b = this.randomNum(min, max);
				return 'rgb(' + r + ',' + g + ',' + b + ')';
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.head-bg {
		height: 320px;
		position: relative;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.u-avatar {
			margin: 0 auto;
		}
	}

	.content_box {
		border-radius: 48rpx 48rpx 0 0;
		background-color: #fff;
		position: relative;
		width: 750rpx;
		padding: 30px 50rpx;
		margin-top: -25px;
		// #ifdef H5
		margin-top: -45px;
		// #endif

		.intro {
			font-size: 28rpx;
			letter-spacing: 2rpx;
			color: #7a848b;
			text-align: justify;
		}
	}

	// 视频投票 start
	.videoshow {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;

		.videotips {
			width: 60%;
			height: 30px;
			line-height: 30px;
			overflow: hidden;
			color: #fff;
			text-align: center;
			font-weight: bold;
			font-size: 18px;
			margin: 0 auto;
		}
	}

	.person-video {
		width: 70%;
		position: fixed;
		left: 10px;
		bottom: 60px;
		z-index: 99;

		.person-video-piao {
			display: inline-block;
			margin-left: 15px;

			text {
				display: block;
				opacity: 0.7;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}

			.number {
				font-size: 30rpx;
				margin: 5px auto;
			}
		}

		.person-video-desc {
			opacity: 0.7;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-left: 15px;
			height: 35px;
			line-height: 35px;
			vertical-align: middle;

			.u-icon {
				float: right;
			}

			.u-icon__icon {
				opacity: 0.7;
				color: #FFFFFF !important;
			}
		}
	}

	// 视频投票 end

	.tabbar {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		height: 65px;
		z-index: 99;

		.active {
			font-size: 34px;
			border-radius: 50%;
			background-color: #fff;
			width: 36px;
			height: 36px;
			line-height: 36px;
		}

		.join {
			width: 90%;
			border-radius: 40rpx;
			color: #fff;
			height: 45px;
			line-height: 45px;
			margin: 10px auto;
			border: 1px solid #fff;
			position: relative;
		}

		.float {
			position: fixed;
			right: 15px;
		}
	}

	.popup {
		padding: 40px 20px;
		width: 350px;

		button {
			border-radius: 40rpx;
			width: 80%;
			margin-top: 30px;
			font-size: 15px;
		}

		.input {
			width: 80%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 40rpx;
			margin: 0 auto;
			font-size: 14px;
		}

		.canvas {
			width: 120px;
			height: 40px;
			margin: 0 auto;
			margin-bottom: 20px;
		}
	}
	
	.join_form{
		padding: 30px 25px;
		.u-form{
			width: 90%;
			margin: 0 auto;
		}
		.join_form_title{
			text-align: center;
		}
		.submit{
			width: 90%;
			margin: 0 auto;
			margin-top: 20px;
			font-size: 14px;
		}
	}
</style>
